<template>
	<view class="coupon-box w100 flex-row-center" @click="addAssistantShow">
		<text class="title">助教</text>
		<view class="sign-left flex-row-center">
			<text class="name" v-if="assistantList.tips">{{ assistantList.tips }}</text>
			<text class="placeholderClass" v-else>选择可用助教</text>
			<up-icon name="arrow-right" color="#5B6868" size="28rpx"></up-icon>
		</view>
	</view>
	<up-popup :show="assistantShow" round="18rpx" mode="bottom">
		<view class="choose-sign flex w100">
			<text class="title">选择使用助教</text>
			<view class="choose-content W100">
				<template v-if="assistantList.list.length > 0">
					<scroll-view scroll-y="true" style="height: 100%;width: 100%;" @scrolltolower="getMoreAssistant">
						<view class="couponItem-box flex-row-center" v-for="(item, index) in assistantList.list"
							:key="item.id" @click="chooseAssistant(item.id)">
							<view class="radio-box-active flex-center"
								v-if="assistantList.ids.find((val)=>val==item.id)">
								<up-icon name="checkbox-mark" color="#0A534F" size="28rpx"></up-icon>
							</view>
							<view class="radio-box" v-else></view>
							<view class="couponItem-list">
								<assistantItemVue :assistantInfo="item"></assistantItemVue>
							</view>
						</view>
						<view class="view-more" @click="getMoreCoupon">
							<up-loadmore :status="assistantList.status" />
						</view>
					</scroll-view>
				</template>
				<view class="not-list-view" v-else>
					<text class="text">暂无可使用助教~</text>
				</view>
			</view>
			<view class="propup-footer w100 flex-row-center">
				<view class="add_box flex-center" @click="closeIds">
					<text class="text">取消</text>
				</view>
				<!-- :disabled="assistantList.ids.length == 0" -->
				<up-button text="选择" @click="submitIds"
					:customStyle="{ 'color': '#115B56', height: '52rpx', width: '180rpx', margin: '0' }"
					color="linear-gradient( 270deg, #94DEAC 0%, #7CDEC7 47%, #79DED3 100%)" shape="circle"></up-button>
			</view>

		</view>
	</up-popup>
</template>

<script setup>
	import {
		watch
	} from 'vue';
	import assistantItemVue from './assistantItem.vue';
	const props = defineProps({
		assistantIds: {
			default: ''
		},
		startDate: {
			default: ''
		},
		endDate: {
			default: ''
		}
	})
	const emit = defineEmits(['changeAssistant'])
	const assistantShow = ref(false);
	const assistantList = reactive({
		list: [],
		page: 1,
		status: 'loadmore',
		ids: [],
		tips: ''
	});
	const startDate = ref(computed(() => props.startDate))
	const endDate = ref(computed(() => props.endDate))
	onMounted(() => {

	});
	const addAssistantShow = async () => {
		if (props.assistantIds) {
			assistantList.ids = props.assistantIds.split(',');
		} else {
			assistantList.ids = [];
		}
		await getassistantList();
		assistantShow.value = true;
	}
	const getassistantList = async () => {
		const res = await $Api.assistant.getUseAssistant({
			page: assistantList.page,
			status: 2
		})
		if (res.code == 1) {
			if (res.data.list && res.data.list.length > 0) {
				let arr = []
				arr = res.data.list.map(val => {
					if (val.rate) {
						val.rate = (val.rate / 10).toFixed(2)
					}
					return {
						...val
					}
				})

				assistantList.list = [...assistantList.list, ...arr]
			}
			if (res.data.totalPage > assistantList.page) {
				assistantList.status = 'loadmore';
				assistantList.page++
			} else {
				assistantList.status = 'nomore'
			}
		} else {
			uni.$u.toast(res.msg)
		}
	}
	const closeAssistant = () => {
		assistantList.page = 1;
		assistantList.list = [];
		assistantShow.value = false;
	}
	const chooseAssistant = (id) => {
		if (!id) return;
		let index = assistantList.ids.findIndex((val) => val == id);
		if (index > -1) {
			assistantList.ids.splice(index, 1);
		} else {
			assistantList.ids.push(id);
		};
	}
	const getMoreAssistant = () => {
		if (assistantList.status === 'loading' || assistantList.status === 'nomore') return
		assistantList.status = 'loading'
		setTimeout(() => {
			getassistantList()
		}, 300)
	}
	const submitIds = () => {
		let str = '';
		if (assistantList.ids.length > 0) {
			str = assistantList.ids.join(',');
			assistantList.tips = `已选择${assistantList.ids.length}助教`;
		} else {
			assistantList.tips = '选择使用助教'
		}
		closeAssistant()
		emit('changeAssistant', str)
	}
	const closeIds = () => {
		assistantList.page = 1;
		assistantList.list = [];

		assistantShow.value = false;
	}
	watch(() => props.assistantIds, (newVal) => {
		if (!newVal) return;
		// assistantList.ids = newVal.split(',');
	}, {
		immediate: true
	})
</script>

<style lang="scss" scoped>
	.placeholderClass {
		color: #5B6868 !important;
		font-size: 26rpx;
		font-weight: 500;
	}

	.coupon-box {
		justify-content: space-between;

		.title {
			font-size: 28rpx;
			font-weight: 500;
			color: #fff;
		}

		.sign-left {
			.name {
				color: $description-color;
				font-size: 28rpx;
				margin-right: 12rpx;
			}
		}
	}

	.couponItem-box {
		padding: 24rpx;
		margin-bottom: 24rpx;

		.couponItem-list {
			flex: 1;
		}
	}

	.choose-sign {
		width: 750rpx;
		padding: 36rpx 0;
		height: 60vh;
		flex-direction: column;
		flex-direction: column;
		background-color: $page-bg-color;
		border-radius: 18rpx 18rpx 0 0;
		box-sizing: border-box;

		.title {
			font-weight: bold;
			font-size: 34rpx;
			color: rgba(255, 255, 255, 0.87);
			line-height: 40rpx;
			margin-left: 24rpx;
		}

		.choose-content {
			flex: 1;
			margin: 24rpx 0;
			overflow: hidden;

			.sign-item {
				padding: 20rpx 0;

				&:not(:last-child) {
					border-bottom: 1rpx solid #373B3E;
				}
			}
		}

		.radio-box {
			width: 36rpx;
			height: 36rpx;
			border-radius: 8rpx;
			border: 1rpx solid #ccc;
			margin-right: 18rpx;
			box-sizing: border-box;
		}

		.radio-box-active {
			width: 36rpx;
			height: 36rpx;
			border-radius: 8rpx;
			background-color: #7EDE9E;
			margin-right: 18rpx;
		}
	}

	.propup-footer {
		justify-content: space-evenly;

		.add_box {
			width: 180rpx;
			height: 52rpx;
			border-radius: 26rpx;
			border: 2rpx solid $btn-plain-color;

			.text {
				font-size: 26rpx;
				color: $btn-plain-color;
				margin-left: 12rpx;
			}
		}
	}
</style>